<template>
  <div id="body">
    <div class="login-container">
      <h2 style="text-align: center;color: #f5ba73;">超市管理系统</h2>
      <form @submit.prevent="login">
        <div class="form-group">
          <label for="username" style="color: #f5ba73;">账号:</label>
          <input type="text" id="username" v-model="username" required>
        </div>
        <div class="form-group">
          <label for="password" style="color: #f5ba73;">密码:</label>
          <input type="password" id="password" v-model="password" required>
        </div>
        <button @click="dengLu" type="submit"  v-loading.fullscreen.lock="fullscreenLoading"
          style="color: #f59082;border: 0px;border-radius: 15px;width: 400px;height:50px;text-align: center;background-color: antiquewhite;">Login
        </button>
      </form>
    </div>
    <audio autoplay="true">
        <source src="http://8.130.116.173:9000/zhaopian/1300042382.mp3?Content-Disposition=attachment%3B%20filename%3D%221300042382.mp3%22&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20230830%2F%2Fs3%2Faws4_request&X-Amz-Date=20230830T031018Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=43d319d536787ab48ed0e49c3fc87e9922c2fff94861210745f63531274eb19d" type="audio/mpeg" style="display: block;">
    </audio>
  </div>
</template>
  
<script>
import { ref } from 'vue';

export default {
  name: 'Login',
  setup() {
    const username = ref('gaokang');
    const password = ref('123456');
    const fullscreenLoading = ref(false);
    const login = () => {
      // Perform login logic here
      console.log(`Username: ${username.value}, Password: ${password.value}`);
    };
    return {
      username,
      password,
      login,
      fullscreenLoading
    };
  },
  methods:{
    dengLu() {
      this.fullscreenLoading = true;

  const url = "http://114.55.111.65:9090/user/login";
  const userLogin = {username:this.username,password:this.password};
  this.axios.post(url,userLogin).then(reponse =>{
    if (reponse.data.statusCode == "200")
    {
      let token =  reponse.data.data.token;
      let user = reponse.data.data.userInfoVO;
      console.log(user)
      localStorage.setItem("user",JSON.stringify(user));
      localStorage.setItem("token","Bearer "+token);
      setTimeout(() => {
        this.fullscreenLoading = false;
        this.$router.push("/");
      }, 1500);
    }
    else {
      setTimeout(() => {
        this.fullscreenLoading = false;
      }, 1500);
      this.$message.error(reponse.data.message);
    }
  }).catch(error => {
    setTimeout(() => {
      this.fullscreenLoading = false;
    }, 1500);
    this.$notify.error({
      title: '错误',
      message: error.message
    });
  });

}
  }
};
</script>
  
<style scoped>
#body{
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100%100%;
  background-image:url('https://ts4.cn.mm.bing.net/th?id=OIP-C.FzJT-INglips6hgc4RTZjgHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2');
}
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 50px;
  transform: translate(0px, 250px);
  border: 1px solid #ccc;
  border-radius: 15px;
  background-color: rgb(248, 241, 173);
}





.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>
  